<template>
	<view style="height: 100%;width: 100%;">
		<view style="width: 66%;margin:auto;padding-top: 50px;">
			<view @click="checkStart" v-if="startTime==null"
				style="border-radius: 50%;width: 200px;height: 200px; background-color: aqua;margin: auto;position: relative;">
				<text class=""
					style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;line-height: 1;font-size: 20px;color: white;">
					上班打卡
				</text>
			</view>

			<view class="btn-checkin " v-else-if="endTime==null" @click="checkEnd"
				style="border-radius: 50%;width: 200px;height: 200px; background-color: aqua;margin: auto;position: relative;">
				<text class=""
					style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;line-height: 1;font-size: 20px;color: white;">
					下班打卡
				</text>
			</view>
			<view class="btn-checkin " v-else disabled
				style="border-radius: 50%;width: 200px;height: 200px; background-color: aqua;margin: auto;position: relative;">
				<text class=""
					style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;line-height: 1;font-size: 20px;color: white;">
					下班打卡
				</text>
			</view>
		</view>
		<view style="width: 80%;margin: auto;">
			<view v-if="startTime">
				<text class="checkin-time">上班打卡时间:{{startTime}}</text>
			</view>
			<view v-if="endTime">
				<text class="checkin-time">下班打卡时间：<br/>{{endTime}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				startTime: null,
				endTime: null,
				info: null
			}
		},
		mounted() {
			this.info = uni.getStorage({
				key: 'info',
				success: (res) => {
					this.info = JSON.parse(res.data)
				}
			})
			//TODO: format date from yyyy-mm-
			uni.getStorage({
				key: 'start_time',
				success: (res) => {
					let timestamp = Date.now();
					let date = new Date(timestamp);
					let day = ("0" + date.getDate()).slice(-2);
					console.log(res.data.slice(8, 10))
					if (day != res.data.slice(8, 10)) {
						this.startTime = res.data
					} else {
						this.startTime = null
					}
				}
			})
			uni.getStorage({
				key: 'end_time',
				success: (res) => {
					let timestamp = Date.now();
					let date = new Date(timestamp);
					let day = ("0" + date.getDate()).slice(-2);
					console.log(res.data.slice(8, 10))
					if (day != res.data.slice(8, 10)) {
						this.endTime = res.data
					} else {
						this.endTime = null
					}
				}
			})
		},
		methods: {
			checkStart() {
				let timestamp = Date.now();
				let date = new Date(timestamp);
				let year = date.getFullYear();
				let month = ("0" + (date.getMonth() + 1)).slice(-2);
				let day = ("0" + date.getDate()).slice(-2);
				let hour = ("0" + date.getHours()).slice(-2);
				let minute = ("0" + date.getMinutes()).slice(-2);
				let second = ("0" + date.getSeconds()).slice(-2);
				// let formattedTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
				let formattedTime = dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss')
				this.startTime = formattedTime
				uni.setStorage({
					key: 'start_time',
					data: this.startTime.toString()
				})
				uni.request({
					url: 'http://localhost:8085/api/attendance/check',
					method: 'POST',
					data: {
						user_id: +this.info.user_id,
						dept_id: +this.info.dept_id,
						start_time: formattedTime
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						let response = res.data
						if (response.code === 200) {
							uni.showToast({
								title: '打卡成功',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: '打卡失败',
								duration: 2000,
								icon: 'error'
							})
						}
					},
					fail: function(res) {
						uni.showToast({
							title: '请求失败',
							duration: 2000,
							icon: 'error'
						})
					}
				})
			},
			checkEnd() {
				let timestamp = Date.now();
				let date = new Date(timestamp);
				let year = date.getFullYear();
				let month = ("0" + (date.getMonth() + 1)).slice(-2);
				let day = ("0" + date.getDate()).slice(-2);
				let hour = ("0" + date.getHours()).slice(-2);
				let minute = ("0" + date.getMinutes()).slice(-2);
				let second = ("0" + date.getSeconds()).slice(-2);
				// let formattedTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
				let formattedTime = dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss')
				this.endTime = formattedTime
				uni.request({
					url: 'http://localhost:8085/api/attendance/check',
					method: 'POST',
					data: {
						user_id: +this.info.user_id,
						dept_id: +this.info.dept_id,
						start_time: this.startTime,
						end_time: formattedTime
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						let response = res.data
						if (response.code === 200) {
							uni.showToast({
								title: '打卡成功',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: '打卡失败',
								duration: 2000,
								icon: 'error'
							})
						}
					},

					fail: function(res) {
						uni.showToast({
							title: '请求失败',
							duration: 2000,
							icon: 'error'
						})
					}
				})

				this.endTime = formattedTime
				uni.setStorage({
					key: 'end_time',
					data: this.endTime.toString()
				})

			},
			bindCommListCmpt() {
				console.log('占位：函数 bindCommListCmpt 未声明');
			},

			url() {
				console.log('占位：函数 url 未声明');
			}
		}
	}
</script>

<style>
	.btn-checkin {
		border-radius: 50%;
		width: 200px;
		height: 200px;
		margin: auto;
		background-color: #20a0ff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		color: white;
		text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
		-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
		-moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
		box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
		cursor: pointer;
	}

	.btn-checkin:hover {
		background-color: #1c87e5;
	}

	.checkin-time {
		margin-top: 20px;
		font-size: 18px;
		text-align: center;
		color: #666;
	}
</style>
